<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>支付订单表</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .layui-form-radio * {
            font-size: 22px;
        }
        .theme-snowy {
            background-color: white;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding: 8px;">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <table style="height: 400px;width: 700px;font-size: 20px;margin-left: 100px">
                    <tbody>
                    <tr>
                        <td width="100px">商户应用： </td>
                        <td colspan="10">
                            <div class="layui-form-item" style="margin-bottom:0px;">
                           <select id="appId" name="appId"></select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>支付方式： </td>
                        <td width="110px">&nbsp;&nbsp;&nbsp;<input type="radio" checked name="payType" value="ali"/><img src="${ctxPath}/assets/images/ali_h5.svg"/></td>
                        <td>&nbsp;&nbsp;&nbsp;支付宝</td>
                        <td width="110px;">&nbsp;&nbsp;&nbsp;<input type="radio" name="payType" checked="checked" value="wx"/><img src="${ctxPath}/assets/images/wx_h5.svg"/></td>
                        <td>&nbsp;&nbsp;&nbsp;微信</td>
                    </tr>
                    <tr>
                        <td>支付单号： </td>
                        <td colspan="10">
                            <span id="spna_mchOrderNo"></span>
                            <input name="mchOrderNo" id="mchOrderNo" type="hidden" class="layui-input"/>
                        </td>
                    </tr>
                    <tr>
                        <td>支付信息： </td>
                        <td colspan="10">
                            <input name="subject" value= "Tiger虎符支付测试" class="layui-input" placeholder="请输入支付信息" lay-verType="tips" lay-verify="required" required/>
                        </td>
                    </tr>
                    <tr>
                        <td>支付金额： </td>
                        <td colspan="10">&nbsp;&nbsp;&nbsp;<input type="radio" name="amount" checked value="0.01" title="0.01"/>
                            <input type="radio" name="amount" value="0.05" title="0.05"/>
                            <input type="radio" name="amount" value="1.00" title="1.00"/>
                            <input type="radio" name="amount" value="5.00" title="5.00"/>
                            <input type="radio" name="amount" value="15.00" title="15.00"/>
                            <input type="radio" name="amount" value="20.00" title="20.00"/>
                            <input type="radio" name="amount" value="30.00" title="30.00"/>
                            <input type="radio" name="amount" value="50.00" title="50.00"/>
                            <input type="radio" name="amount" value="101.00" title="101.00"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="10">
                            <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>立刻支付</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>


<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var form = layui.form;
        $("#a_copy").click(function(){
            copyCode(this);
        });
        function copyCode(v) {
            let transfer = document.createElement('input')
            document.body.appendChild(transfer)
            transfer.value = $(v).attr("obj-data") ;// 这里表示想要复制的内容
            //transfer.focus()
            transfer.select()
            if (document.execCommand('copy')) {
                document.execCommand('copy')
            }
            //transfer.blur()
            document.body.removeChild(transfer)
            layer.msg("一键复制成功，可随时进行粘贴！");
        };
        function randomOrderNo(){
            var no = 'M' + new Date().getTime() + Math.floor(Math.random() * (9999 - 1000) + 1000);
            $("#mchOrderNo").val(no);
            $("#spna_mchOrderNo").html(no);
        }
        randomOrderNo();
        form.render('radio');
        admin.req(getProjectUrl() + 'mchApp/list', function(res){
            // 渲染字典下拉
            xnUtil.xsSelect("appId", 'appName', 'appId', '请选择应用', res.data);

        }, {async: false});

        function tosub(data,taag){
            var url = getProjectUrl() + 'payOrder/paytest';
            var fromfield = data.field;
            if("ali" == fromfield.payType){
                $("#payType_img").attr("src","${ctxPath}/assets/images/ali_h5.svg");
                $("#span_pay").html("支付宝");
                $("#font_pay").html("复制连接打开手机浏览器即可支付");

                fromfield.payWay="ALIPAY";
                fromfield.payType="ALIPAY_H5";
            }
            if("wx" == fromfield.payType){
                $("#payType_img").attr("src","${ctxPath}/assets/images/wx_h5.svg");
                fromfield.payWay="WEIXIN";
                fromfield.payType="MINIAPP_WEIXIN";
            }
            admin.req(url, JSON.stringify(fromfield), function(res){
                if(res.code == 200){
                    if(res.data.payDataType == "payUrl"){
                        layer.confirm('支付成功？', {icon: 3, title:'提示'}, function(index){
                            layer.close(index);
                        });
                        window.open(res.data.payData,"_blank")
                    }else if(res.data.payDataType == "codeImgUrl"){
                        $("#pay_img").attr("src",res.data.payData)
                        $("#a_copy").attr("obj-data",res.data.payUrl)
                        $("#pay_url").html(res.data.payUrl)
                        if(taag==0){
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['500px', '520px'], //宽高
                                btnAlign: 'c',
                                content: $("#soudiv"),
                                cancel: function(){
                                    clearInterval(t);
                                }
                            });
                        }
                    }else {
                        layer.msg("不支持类型！");
                    }

                }else {
                    layer.msg(res.msg);
                }
            }, 'post');
        }

        var taag = 1;
        var t;
        /**
         * 表单提交事件
         */
        form.on('submit(formSubmitBtn)', function (data) {
            taag=0;
            clearInterval(t);
            tosub(data,taag);
            taag=taag+1;
            t=setInterval(function(){
                randomOrderNo();
                console.log(taag);
                tosub(data,taag);
            },3000);
            return false;
        });
    });

</script>
<div style="display: none" id="soudiv">
    <table width="500px" style="word-break:break-all;">
        <tr>
            <td style=" text-align: center; "><img id="pay_img" src=""/></td>
        </tr>
        <tr>
            <td align="center" style="padding-top: 10px;">
                <img id="payType_img" src="" alt=""/>&nbsp;
                <span style="font-size: 18px;font-weight: 600">打开 <span id="span_pay">微信</span> " <span style="color: red">扫一扫</span>"扫码支付</span>
            </td>
        </tr>
        <tr>
            <td align="center" style="padding-top: 10px;">
                <span style="font-size: 18px;"><span id="font_pay">发给微信朋友直接打开可支付</span><a class="layui-btn layui-btn-xs" style="margin-left: 10px;padding-left: 10px;padding-right: 10px;" obj-data="" id="a_copy">一键复制</a><br/> <span style="color: red" id="pay_url"></span></span>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
